<template>
  <view class="container">
    <view class="common_cell">
      <u-cell
        @click="cityShow = true"
        title="当前城市"
        isLink
        :value="cityName"
        :border="false"
      />
    </view>

    <view class="common_cell">
      <u-cell-group :border="false">
        <u-cell
          :border="false"
          title="温度"
          isLink
          :value="temperatureLabel"
          @click="openTemperaturePopup"
        />
        <u-cell
          :border="false"
          title="湿度"
          isLink
          :value="humidityLabel"
          @click="this.$refs['humidityPopupRef'].open = true"
        />
        <u-cell
          @click="this.$refs['weatherPopupRef'].open = true"
          :border="false"
          title="天气"
          isLink
          :value="weatherLabel"
        />
        <u-cell
          @click="this.$refs['pm25PopupRef'].open = true"
          :border="false"
          title="PM2.5"
          isLink
          :value="pm25Label"
        />
        <u-cell
          :border="false"
          title="空气质量"
          isLink
          :value="airQualityLabel"
          @click="this.$refs['airQualityPopupRef'].open = true"
        />
        <u-cell
          :border="false"
          title="日落日出"
          isLink
          :value="sunriseLabel"
          @click="this.$refs['sunrisePopupRef'].open = true"
        />
        <u-cell
          :border="false"
          title="风速"
          isLink
          :value="windSpeedLabel"
          @click="this.$refs['windSpeedPopupRef'].open = true"
        />
      </u-cell-group>
    </view>
    <!-- 城市选择 -->
    <u-picker
      :show="cityShow"
      ref="uPicker"
      :columns="cityList"
      @confirm="cityConfirm"
      @change="changeHandler"
      @cancel="cityShow = false"
    ></u-picker>

    <!-- 温度弹窗 -->
    <temperaturePopup ref="temperaturePopupRef" @confirm="temperatureConfirm" />

    <!-- 湿度弹窗 -->
    <humidityPopup ref="humidityPopupRef" @confirm="humidityConfirm" />

    <!-- 天气选择弹窗 -->
    <weatherPopup ref="weatherPopupRef" @confirm="weatherConfirm" />

    <!-- Pm2.5 -->
    <pm25Popup ref="pm25PopupRef" @confirm="pm25Confirm" />

    <!-- 空气质量 -->
    <airQualityPopup ref="airQualityPopupRef" @confirm="airQualityConfirm" />
    <!-- 日出日落 -->
    <sunrisePopup ref="sunrisePopupRef" @confirm="sunriseConfirm" />
    <!-- 风速 -->
    <windSpeedPopup ref="windSpeedPopupRef" @confirm="windSpeedConfirm" />
  </view>
</template>
  
  <script>
import cityData from "./city";
import temperaturePopup from "./temperaturePopup/index.vue";
import humidityPopup from "./humidityPopup/index.vue";
import weatherPopup from "./weatherPopup/index.vue";
import pm25Popup from "./pm25Popup/index.vue";
import airQualityPopup from "./airQualityPopup/index.vue";
import sunrisePopup from "./sunrisePopup/index.vue";
import windSpeedPopup from "./windSpeedPopup/index.vue";
import {
  airQualityMap,
  conditionMap,
  humidityMap,
  pm25Map,
  sunriseMap,
  weatherMap,
} from "../../../common/enum/automationConfig";

export default {
  components: {
    temperaturePopup,
    humidityPopup,
    weatherPopup,
    pm25Popup,
    airQualityPopup,
    sunrisePopup,
    windSpeedPopup,
  },
  data() {
    return {
      // 页面参数
      options: {},
      //   选择的城市
      cityName: "",

      //   温度
      temperature: null,
      //   温度类型
      temperatureType: null,
      //   湿度
      humidity: null,
      //   天气
      weather: null,
      //   Pm2.5
      pm25: null,
      //   空气质量
      airQuality: null,
      //   日落或者日出
      sunrise: null, //是否日落
      // 风速
      windSpeed: null,
      windSpeenType: null,

      // 城市选择器
      cityShow: false,
      // 打开选择器显示默认城市
      cityList: [],

      cityLevel1: [],
      cityLevel2: [],
    };
  },
  //   计算属性
  computed: {
    weatherLabel() {
      return weatherMap[this.weather];
    },
    pm25Label() {
      return pm25Map[this.pm25];
    },
    airQualityLabel() {
      return airQualityMap[this.airQuality];
    },
    humidityLabel() {
      return humidityMap[this.humidity];
    },
    sunriseLabel() {
      return sunriseMap[this.sunrise];
    },
    temperatureLabel() {
      if (this.temperature !== null && this.temperatureType !== null) {
        return `${conditionMap[this.temperatureType]} ${this.temperature}℃`;
      }

      return null;
    },
    windSpeedLabel() {
      if (this.windSpeed !== null && this.windSpeenType !== null) {
        return `${conditionMap[this.windSpeenType]} ${this.windSpeed} m/s`;
      }
      return null;
    },
  },
  onUnload() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("onConfigChange", {
      cityName: this.cityName,
      temperature: this.temperature,
      temperatureType: this.temperatureType,
      humidity: this.humidity,
      weather: this.weather,
      pm25: this.pm25,
      airQuality: this.airQuality,
      sunrise: this.sunrise,
      windSpeed: this.windSpeed,
      windSpeenType: this.windSpeenType,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("options", options);

    // 循环赋值
    Object.keys(options).forEach((key) => {
      this[key] = options[key];
    });

    // 城市选择器初始化
    this.initCityData();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    // 城市选择器
    initCityData() {
      // 遍历城市js
      cityData.forEach((item1, index1) => {
        let temp2 = [];
        this.cityLevel1.push(item1.provinceName);
        let temp4 = [];
        let temp3 = [];
        // 遍历市
        item1.cities.forEach((item2, index2) => {
          temp2.push(item2.cityName);
          // 遍历区
          //   item2.counties.forEach((item3, index3) => {
          //     temp3.push(item3.countyName);
          //   });
          //   temp4[index2] = temp3;
          temp3 = [];
        });
        this.cityLevel2[index1] = temp2;
      });
      // 选择器默认城市
      this.cityList.push(this.cityLevel1, this.cityLevel2[0]);
    },

    // 选中时执行
    changeHandler(e) {
      const {
        columnIndex,
        index,
        indexs,
        value,
        values,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      if (columnIndex === 0) {
        // 选择第一列数据时
        // 设置第二列关联数据
        picker.setColumnValues(1, this.cityLevel2[index]);
      }
    },

    // 单击确认按钮时执行
    cityConfirm(e) {
      // 输出数组 [省, 市, 区]
      console.log(e.value);
      this.cityName = e.value?.[1];
      // 隐藏城市选择器
      this.cityShow = false;
    },
    openTemperaturePopup() {
      this.$refs.temperaturePopupRef.open = true;
    },
    temperatureConfirm(_values) {
      this.temperature = _values?.temperature;
      this.temperatureType = _values?.type;
    },
    humidityConfirm(_values) {
      this.humidity = _values;
    },
    weatherConfirm(_values) {
      this.weather = _values;
    },
    pm25Confirm(_values) {
      this.pm25 = _values;
    },
    airQualityConfirm(_values) {
      this.airQuality = _values;
    },
    sunriseConfirm(_values) {
      this.sunrise = _values;
    },
    windSpeedConfirm(_values) {
      this.windSpeed = _values?.value;
      this.windSpeenType = _values?.type;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  background: #f6f7fb;
  padding: 25.568rpx;
}
</style>
  